<template>
  <div class="app-container ">
    <el-button type="primary" @click="updateMenu">{{$t('btn.save')}}<i class="el-icon-upload el-icon--right"/></el-button>
    <el-button type="success" @click="addMenu">{{$t('btn.add')}}<i class="el-icon-plus el-icon--right"/></el-button>
    <div class="contain-tree">
      <dragTreeTable :data="treeDataLeft" :data-other="treeDataRight" :on-drag="onTreeDataChangeLeft" :isdraggable="false" style="width:68%"/>
      <dragTreeTable :data="treeDataRight" :data-other="treeDataLeft" :on-drag="onTreeDataChangeRight" :isdraggable="true" style="width:30%" class="tree-right"/>
    </div>
    <el-dialog :title="isCreate ? $t('tips.add'): $t('table.edit')" :visible.sync="dialogFormVisible" :before-close="closeDialog">
      <el-form ref="dataForm" :model="formData" :rules="rules" label-width="120px">
        <el-form-item :label="$t('table.title')" prop="title">
          <el-input v-model="formData.title"/>
        </el-form-item>
        <el-form-item :label="$t('table.name')" prop="name">
          <el-input v-model="formData.name"/>
        </el-form-item>
        <el-form-item :label="$t('table.component')" prop="component">
          <el-input v-model="formData.component"/>
        </el-form-item>
        <el-form-item :label="$t('table.path')" prop="path">
          <el-input v-model="formData.path"/>
        </el-form-item>
        <el-form-item :label="$t('table.params')" prop="param">
          <el-input v-model="formData.param"/>
        </el-form-item>
        <el-form-item :label="$t('table.icon')" prop="icon">
          <el-input v-model="formData.icon" style="width:200px;margin-right:20px;"/>
          <el-button icon="el-icon-edit" size="medium" type="primary" @click="dialogIcon = true">{{ $t('table.selectIcon') }}</el-button>
        </el-form-item>
        <el-form-item :label="$t('table.hidden')" prop="hidden">
          <el-switch v-model="formData.hidden" :active-value="1" :inactive-value="0"/>
        </el-form-item>
        <el-form-item :label="$t('table.status')" prop="status">
          <el-switch v-model="formData.status" :active-value="1" :inactive-value="0"/>
        </el-form-item>
        <el-form-item :label="$t('table.system')" prop="system">
          <el-switch v-model="formData.system" :active-value="1" :inactive-value="0"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">{{ $t('btn.cancel') }}</el-button>
        <el-button v-if="isCreate" type="primary" @click="createData">{{ $t('btn.confirm') }}</el-button>
        <el-button v-else type="primary" @click="updateData">{{ $t('btn.confirm') }}</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="$t('table.icon')" :visible.sync="dialogIcon" :before-close="closeIcon" width="80%">
      <svg-list @handleIcon="handleIcon"/>
    </el-dialog>
  </div>
</template>
<script>
import Http from '@/utils/http'
import SvgList from './svg-icon/index'
import dragTreeTable from '@/components/dragTreeTable'
export default {
  name: 'App',
  components: {
    dragTreeTable,
    SvgList
  },
  data() {
    return {
      formData: {},
      dialogIcon: false,
      isCreate: false,
      dialogFormVisible: false,
      rules: {
        title: [{ required: true }],
        name: [{ required: true }],
        path: [{ required: true }]
      },
      treeDataLeft: {
        columns: [],
        children: [],
        custom_field: {
          id: 'name',
          order: 'sort',
          lists: 'children',
          parent_id: 'parent_id'
        }
      },
      treeDataRight: {
        columns: [],
        children: [],
        custom_field: {
          id: 'name',
          order: 'sort',
          lists: 'children',
          parent_id: 'parent_id'
        }
      }
    }
  },
  created() {
    this.fetchData()
  },
  mounted() {
    this.treeDataLeft.columns = [
      {
        type: 'selection',
        title: '菜单名称',
        field: 'title',
        width: 200,
        align: 'left',
        formatter: item => {
          return '<span>' + (item.title ? item.title : item.name) + '</span>'
        }
      },
      {
        title: '名称',
        field: 'title',
        width: 200,
        align: 'center',
        formatter: item => {
          return '<span>' + item.name + '</span>'
        }
      },
      {
        title: '操作',
        type: 'action',
        width: 350,
        align: 'center',
        actions: [
          {
            text: '编辑',
            onclick: this.onEdit,
            formatter: item => {
              return '<i>编辑</i>'
            }
          }
        ]
      }
    ]
    this.treeDataRight.columns = [
      {
        type: 'selection',
        title: '菜单名称',
        field: 'title',
        width: 200,
        align: 'left',
        formatter: item => {
          return '<span>' + item.title + '</span>'
        }
      },
      {
        title: '操作',
        type: 'action',
        width: 350,
        align: 'center',
        actions: [
          {
            text: '编辑',
            onclick: this.onEdit,
            formatter: item => {
              return '<i>编辑</i>'
            }
          }
        ]
      }
    ]
  },
  methods: {
    createData() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.treeDataRight.children = [this.formData, ...this.treeDataRight.children]
          this.closeDialog()
        }
      })
    },
    updateData() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.closeDialog()
        }
      })
    },
    closeDialog() {
      this.formData = Object.assign({}, this.resetData)
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      this.dialogFormVisible = false
      this.isCreate = false
    },
    closeIcon() {
      this.dialogIcon = false
    },
    handleIcon(text, event) {
      this.formData.icon = text
      this.dialogIcon = false
    },
    async updateMenu() {
      this.$confirm('确定保存菜单？')
        .then(async _ => {
          const res = await Http.post(this.api.admin_menu, { tree: JSON.stringify(this.treeDataLeft.children) })
          this.$notify({
            title: this.$t('tips.success'),
            message: res.msg + ' ' + this.$t('tips.success'),
            type: 'success',
            duration: 2000
          })
          this.fetchData()
        })
        .catch(_ => _)
    },
    addMenu() {
      this.isCreate = true
      this.dialogFormVisible = true
    },
    async fetchData() {
      const res = await Http.get(this.api.menu_init)
      this.treeDataLeft.children = res.data.left
      this.treeDataRight.children = res.data.right
    },
    onTreeDataChangeLeft(list, otherList) {
      this.treeDataLeft.children = list
      this.treeDataRight.children = otherList
    },
    onTreeDataChangeRight(list, otherList) {
      this.treeDataRight.children = list
      this.treeDataLeft.children = otherList
    },
    onEdit(item) {
      this.formData = item
      this.dialogFormVisible = true
    },
    onDetail(item) {
    },
    onCheckChange(rows) {
    }
  }
}
</script>
<style lang="scss">
.contain-tree {
  display: flex;
  justify-content: space-between;
}
.tree-right .drag-tree-table-body {
  max-height: 700px;
  overflow: auto;
}
</style>
